<html>
	<head>
		<meta charset="UTF-8">
		<title>编辑--更新的JS特效</title>
	</head>
	<body>
		<table border="3px" cellspacing="0" cellpadding="8" width="50%" style="margin: 30px auto;">
			<tr>
				<th>新闻类型</th>
				<th>新闻数量</th>
				<th>操作</th>
			</tr>
			
			<tr id="tr1">
				<td id="1-td1">国际新闻</td>
				<td id="1-td2">12</td>
				<td id="1-td3">
					<a href="#" onclick="edit(1)">编辑</a>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr id="tr2">
				<td id="2-td1">娱乐新闻</td>
				<td id="2-td2">16</td>
				<td id="2-td3">
					<a href="#" onclick="edit(2)">编辑</a>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr id="tr3">
				<td id="3-td1">体育新闻</td>
				<td id="3-td2">10</td>
				<td id="3-td3">
					<a href="#" onclick="edit(3)">编辑</a>
					<a href="#">删除</a>
				</td>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
		var oid="";
		var oldtd1="";
		var oldtd2="";
		var oldtd3="";
		function edit(id){
			quxiao();
			oid = id;
			oldtd1 = document.getElementById(id+"-td1").innerHTML; 
			oldtd2 = document.getElementById(id+"-td2").innerHTML;
			oldtd3 = document.getElementById(id+"-td3").innerHTML; 
			document.getElementById(id+"-td1").innerHTML="<input type='text' value='"+oldtd1+"'>";
			document.getElementById(id+"-td2").innerHTML="<input type='text' value='"+oldtd2+"'>";
			document.getElementById(id+"-td3").innerHTML="<a href='#' onclick='save(typeid)'>更新</a> <a href='#' onclick='quxiao()'>取消</a>";
			document.getElementById("tr"+id).style.background="lightskyblue";
		}
		function quxiao(){
			if(oid != ""){
				document.getElementById(oid+"-td1").innerHTML=oldtd1;
				document.getElementById(oid+"-td2").innerHTML=oldtd2;
				document.getElementById(oid+"-td3").innerHTML=oldtd3;
				document.getElementById("tr"+oid).style.background="";
			}
		}
	</script>
</html>